
<template>
    <view>
        <view :class="$style.tips">温馨提示:电话以校办发布数据为准</view>
        <view class="m-t-10">
            <uni-search-bar  v-model="searchValue">
            </uni-search-bar>
            <view :class="$style.cells">
                <view v-for="item in dataRows" :key="item.id" :class="$style.cell" @click="goNav(item.id)">
                    <view :class="$style.title">{{ item.dept }}</view>
                    <uni-icons type="right" color="#90A3BF" size="14"></uni-icons>
                </view>
            </view>
        </view>

    </view>
</template>
<script lang="ts" setup>
import { useGlobalStore } from '@/stores';
import { deptContactsListApi } from '@/api/DeptContacts';
import { ref, computed } from 'vue';
    
    const globalStore = useGlobalStore()

    const rows = ref<any[]>([])
    

    function goNav(id) {
        uni.navigateTo({
            url : '/pages/deptContacts/detail/index?id=' + id
        })
    }


    const searchValue = ref('')

    const dataRows = computed(() => {
        const items:any[] = []

        rows.value.forEach(item => {

            console.log(searchValue.value)

            if(searchValue.value) {
                if(item.dept.includes(searchValue.value)) {
                    items.push(item)
                }
            }else {
                items.push(item)
            }
        })

        return items

    }) 
    function search(e) {
        console.log(e)
    }



    deptContactsListApi().then(r => {
        rows.value = r.data
    })
</script>


<style lang="scss" module>

    .tips{
        padding: 20rpx;
        color: #fff;
        background-color: #0052D9;
    }


    .cells{
        background-color: #fff;
        border-radius: 24rpx;
        padding: 0 $base-space;
        

        .cell{
            height: 88rpx;
            display: flex;
            align-items: center;

            border-bottom: 1rpx solid #E7E7E7;
            &:last-of-type{
                //border-bottom: none;
            }

            .title{
                flex: 1;
                font-size: 28rpx;
                min-width: 0;
                overflow: hidden;       /* 隐藏超出的内容 */
                white-space: nowrap;    /* 不换行 */
                text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
                
                color: rgba(0, 0, 0, 0.9);
            }
        }
    }
</style>